<template>
  <el-container class="page-con">
    <!-- 顶部导航 -->
    <el-header class="header-con">
      <div class="header-left">
        <i class="logo"></i>
        <span class="title">openlayer简单使用说明</span>
      </div>
      <div class="header-right">
        <p @click="goApi">官网API</p>
      </div>
    </el-header>

    <el-container>
      <el-aside width="200px">
        <aside-menu @seletcMenu="seletcMenu"></aside-menu>
      </el-aside>
      <el-main class="page-main">
        <code-and-review :curMenu="curMenu"></code-and-review>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import asideMenu from "@/common/components/asideMenu.vue";
import codeAndReview from "@/common/components/codeAndReview/codeAndReview.vue";
import documentIndex from '@/document/index.js';

export default {
  name: "home",

  data(){
    return{
      curMenu: '',
    }
  },

  components: {
    asideMenu,
    codeAndReview
  },

  methods: {
    goApi() {
      window.open("https://openlayers.org");
    },
    seletcMenu(name){
      this.curMenu = name
    }
  }
};
</script>

<style lang="less" scoped>
@headerHeight: 60px;
.page-con {
  width: 100%;
  height: 100%;
}
.header-con {
  background-color: #0075c7;
  display: flex;
  .header-left {
    .logo {
      display: inline-block;
      width: 35px;
      height: 35px;
      background-image: url("../assets/logo.png");
      background-size: 100% 100%;
      vertical-align: middle;
      margin-right: 15px;
    }
    .title {
      color: #fff;
      padding-left: 15px;
      position: relative;
      &:before {
        content: "";
        width: 1px;
        height: 100%;
        background-color: #fff;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%) scaleX(0.5);
      }
    }
  }
  .header-left,
  .header-right {
    flex: 1;
    height: @headerHeight;
    line-height: @headerHeight;
  }
  .header-right {
    text-align: right;
    margin-right: 20px;
    p {
      margin: 0;
      cursor: pointer;
      color: #fff;
    }
  }
}
.page-main {
  border-left: 1px solid #ebebeb;
  padding:0 15px;
  margin: 0;
}
/deep/ .el-container {
  overflow: hidden;
}
/deep/ .el-aside {
  overflow: hidden;
  height: 100%;
  .aside-menu {
    overflow: auto;
    height: 100%;
  }
}
</style>